<template>
  <div>
    <Button type="success" :to="{path:'finishedCategory-add',query:{}}">
      添加成品笔类型
    </Button>
    <Card style="width:100%">
      <row type="flex" justify="space-between">
        <i-col>

          <span class="key" style="margin-left: 20px">成品笔类型代码:</span>
          <Input v-model="code" placeholder="请输入成品笔类型代码" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">成品笔类型名称:</span>
          <Input v-model="name" placeholder="请输入成品笔类型名称" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px;margin-top: 20px">状态:</span>
          <Select v-model="state" style="width: 80px;margin-left:10px">
            <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Button type="success" icon="ios-search" style="margin-left: 50px" @click="find">查询</Button>
        </i-col>
      </row>
    </Card>


    <Table stripe :columns="columns" :data="data"></Table>

    <row style="margin-top: 10px">
      <i-col align="right">
        <Page show-sizer :total="total" show-total @on-change="onChange" @on-page-size-change="onPageSizeChange"/>
      </i-col>
    </row>

  </div>
</template>

<script>
  import {MaterialClassificationFindAll, CategoryFindAll, CategoryDeleteByCode,CategoryDelete} from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 10,//pageSize:每页几条数据
        total: 0,
        makingsState: '成品笔',
        materialClassificationCode: '',
        code: '',
        name: '',
        state: '',
        stateList: [
          {
            value: '0',
            label: '不使用'
          }, {
            value: '1',
            label: '使用'
          }
        ],
        columns: [
          {
            title: '成品笔类型代码',
            key: 'code'
          },
          {
            title: '成品笔类型名称',
            key: 'name'
          },
          {
            title: '状态',
            key: 'state'
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        path: 'finishedCategory-update', query: {
                          code: params.row.code,
                        }
                      })
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认修改状态',
                        content: '是否要修改成品笔类型状态？',
                        onOk: () => {
                          this.CategoryDeleteByCode(params.row.code);
                        },
                        onCancel: () => {
                        }
                      })
                    },
                  }
                }, '修改状态'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除',
                        content: '是否要删除成品笔类型？',
                        onOk: () => {
                          this.CategoryDelete(params.row.code);
                        },
                        onCancel: () => {
                        }
                      })
                    },
                  }
                }, '删除')
              ]);
            }
          }

        ],
        materialClassificationList:[],
        data: []
      }
    },
    mounted() {
      this.CategoryFindAll();
      this.MaterialClassificationFindAll();
    },
    methods: {
      find() {
        this.CategoryFindAll();
      },
      MaterialClassificationFindAll() {
        var data = {
          page: this.page,
          pageSize: 1000,
          state:'1'
        };
        MaterialClassificationFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.materialClassificationList = data.data.data.list;
          }
        })
      },
      CategoryFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          materialClassificationCode: this.materialClassificationCode,
          code: this.code,
          name: this.name,
          state: this.state
        };
        CategoryFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.data = data.data.data.list;
            this.total = data.data.data.total;
          }
        })
      },

      onPageSizeChange(pageSize) {
        this.page = 1;
        this.pageSize = pageSize;
        this.CategoryFindAll();
      },
      onChange(page) {
        this.page = page;
        this.CategoryFindAll();
      },
      CategoryDeleteByCode(code) {
        let data = {
          code: code,
          makingsState:this.makingsState
        }
        CategoryDeleteByCode(data).then(res => {
          this.CategoryFindAll();
        })
      },
      CategoryDelete(code) {
        let data = {
          code: code,
          makingsState:this.makingsState
        }
        CategoryDelete(data).then(res => {
          if ( res.data.code==0){
            this.$Message.success("删除成功");
            this.CategoryFindAll();
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
    }
  }
</script>

<style>
  .width-condition {
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
